<template>
  <div>
    <van-cell :value="orientationType || '内容'" is-link @click="show = true">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <span class="custom-title">朝向</span>
      </template>
    </van-cell>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: false,
      actions: [
        { name: '东' },
        { name: '西' },
        { name: '南' },
        { name: '北' }

      ],
      orientationType: ''
    }
  },
  methods: {
    onSelect (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false
      this.orientationType = item.name
      this.$emit('orientationType', item.name)
    }
  }
}
</script>

<style></style>
